<template>
  <div class="app-container home bg_f4f7fe" v-loading='loading'>
    <div class="innerwrapper flex">
      <div class="leftbox">
        <div class="flexcolumn aligncenter leftposition">
          <i class="el-icon-d-arrow-left rotate90 f-20 c_000"></i>
          <div class="mobox c_fff f-15 flexcenter mt_15 mb_15 commhover" @click="openMould">切换模板</div>
          <i class="el-icon-d-arrow-left rotatefu90 f-20 c_000"></i>
        </div>
        <create-left :activeId='activeId' />
      </div>
      <div class="rightbox">
        <div class="flexend mb_15">
          <el-button type="primary mr_15" size="small" @click="share">分 享</el-button>
          <el-button type="primary mr_15" size="small" :loading='saveloading' @click="saveAll">保 存</el-button>
        </div>
        <div class="rightpanel bg_fff">
          <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
            <el-tab-pane label="基础设置" name="first">
              <one-set ref="oneset" :activeId='activeId' :ischange='ischange' @getTemplate='getTemplate' @changeType='changeType' />
            </el-tab-pane>
            <el-tab-pane label="页面设置" name="second">
              <two-set ref="twoset" :activeId='activeId' @open='openMould'/>
            </el-tab-pane>
            <el-tab-pane label="奖品设置" name="third">
              <three-set ref="threeset" :activeId='activeId' :taskType='type' />
            </el-tab-pane>
            <el-tab-pane label="高级设置" name="fourth">
              <four-set ref="fourset" :activeId='activeId' />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 切换模板 -->
    <el-dialog
      title="切换模板"
      :visible.sync="openmoudle"
      width="1200px"
      center
      :before-close="handleCloseMould">
      <MouldComp v-if="openmoudle" :modalId='t_id' @changeTemp='changeTemp' />
    </el-dialog>

    <el-dialog
      title="分享"
      :visible.sync="dialogShare"
      width="520px"
      :before-close="handleCloseShare">
      <!-- <div>活动链接&网址：</div>
      <div>
        <el-input placeholder="请输入内容" v-model="link" />
        <el-button type="priamry">复制活动链接</el-button>
      </div> -->
      <el-form ref="form" :model="form" label-width="80px" label-position="top">
        <el-form-item label="活动链接&网址：">
          <div class="flex borderbtn">
            <el-input v-model="form.link" readonly></el-input>
            <el-button type="primary" v-clipboard:copy="form.link" v-clipboard:success="clipboardSuccess">复制链接</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CreateLeft from "./CreateLeft.vue"
import OneSet from './components/OneSet.vue'
import TwoSet from './components/TwoSet.vue'
import ThreeSet from './components/ThreeSet.vue'
import MouldComp from './components/MouldComp.vue'
import FourSet from './components/FourSet.vue'
import { taskInfo,taskEdit,taskSave } from '@/api/active'
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      loading:false,
      activeName: "first",
      openmoudle:false,
      info:{},
      activeId:'',
      t_id:'',//模板Id
      ischange:'',
      saveloading:false,
      dialogShare:false,
      form:{
        link:''
      },
      type:'',
    };
  },
  components: {
    CreateLeft,
    OneSet,
    TwoSet,
    MouldComp,
    ThreeSet,
    FourSet
  },
  computed: {
    ...mapGetters(["iframeUrl"]),
  },
  created(){
    let query = this.$route.query
    this.activeId = query.id
    this.form.link = this.h5domain + '?id='+this.activeId
  },
  methods: {
    ...mapActions(["setUrl"]),
    // 获取活动信息
    // getInfo(){
    //   this.loading = true
    //   taskInfo({id:this.activeId}).then(res=>{
    //     this.info = res.data
    //     this.loading = false
    //   })
    // },

    getTemplate(id){
      this.t_id = id
      // this.ischange = id
    },

    // 点击
    handleClick(tab) {
      console.log(tab);
      // this.task = this.$refs.oneset.form
      // this.keys = Date.now()
    },

    changeType(type){
      this.type = type
    },

    openMould(){
      this.t_id = this.$refs.oneset.t_id
      console.log('t_id:',this.$refs.oneset.t_id)
      this.openmoudle = true
    },

    handleCloseMould(){
      this.openmoudle = false
    },

    share(){
      this.dialogShare = true
    },

    handleCloseShare(){
      this.dialogShare = false
    },

    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },

    transData(data){
      let arr = []
      data.filter(item=>item.name!=='99').forEach(item=>{
        let params = {
          level_name: item.level_name,
          draw_name: item.draw_name,
          photo: item.photo,
          type: item.type,
          num: item.num,
          cash_msg: item.cash_msg
        }
        if(item.type!==3){
          params.startime = item.time[0]
          params.endtime = item.time[1]
        }
        if(item.type == 2){
          params.is_cash = item.is_cash
          params.draw_type = item.is_cash == 2?1:2
          params.address = item.address
        }else if(item.type == 3){
          params.draw_num = item.draw_num
        }else if(item.type == 4){
          // params.draw_num = item.draw_num
          params.url = item.url
        }else if(item.type == 5){
          params.coin = item.coin
        }
        arr.push(params)
      })
      return arr
    },

    transComfort(item){
      let params = {
        level_name: item.level_name,
        draw_name: item.draw_name,
        photo: item.photo,
        type: item.type,
        num: item.num,
        cash_msg: item.cash_msg,
        is_limit: item.is_limit
      }
      if(item.type!==3){
        params.startime = item.time[0]
        params.endtime = item.time[1]
      }
      if(item.type == 2){
        params.is_cash = item.is_cash
        params.draw_type = item.is_cash == 2?1:2
        params.address = item.address
      }else if(item.type == 3){
        params.draw_num = item.draw_num
      }else if(item.type == 4){
        // params.draw_num = item.draw_num
      }else if(item.type == 5){
        params.coin = item.coin
      }
      return params
    },

    changeTemp(id){
      console.log('id:',id)
      this.ischange = id
      this.setUrl(this.iframeUrl)
    },

    saveAll(){
      let status = this.$refs.oneset.status
      let threeset = this.$refs.threeset
      let isconsform = []
      if(threeset){
        let rewordValid = true
        threeset.$refs.ruleForm.validate(valid=>{
          rewordValid = valid
        })
        if(!rewordValid){
          this.$message.warning('还有必填选项未填写，请检查奖品设置')
          return
        }
        isconsform = this.$refs.threeset.form.reword.filter(item=>item.name=='99')
        // console.log('isconsform:',this.$refs.threeset.form.reword,isconsform)
      }
      if(this.$refs.fourset){
        if(Number(this.$refs.fourset.form.one_win_num)>Number(this.$refs.fourset.form.win_num)){
          this.$message.warning('每人每项中奖次数不能大于每人中奖次数')
          return
        }
        // if(Number(this.$refs.fourset.form.user_day_num)>Number(this.$refs.fourset.form.all_num)){
        //   this.$message.warning('每人每日抽奖获得次数不能大于每人每人抽奖总次数')
        //   return
        // }
        // if(Number(this.$refs.fourset.form.num)<Number(this.$refs.fourset.form.user_day_num)){
        //   this.$message.warning('首次登录抽奖次数不能低于每人每日抽奖获得次数')
        //   return
        // }
      }
      let params = {
        task: JSON.stringify(this.$refs.oneset.form),//基础设置
        setting:JSON.stringify(this.$refs.twoset.form),//基础设置
        draw:JSON.stringify(this.transData(this.$refs.threeset.form.reword)),
        // comfort:JSON.stringify({
        //   id:this.$refs.threeset.activeId,
        //   ...this.transComfort(isconsform[0])
        // }),
        config:JSON.stringify({
          id:this.$refs.fourset.activeId,
          ...this.$refs.fourset.form
        }),
        advert:JSON.stringify(this.$refs.fourset.advData)
      }
      if(isconsform.length){
        params.comfort = JSON.stringify({
          id:this.$refs.threeset.activeId,
          ...this.transComfort(isconsform[0])
        })
      }
      this.saveloading = true
      if(status == 1){
        taskSave(params).then(()=>{
          this.$message.success('保存成功')
          this.saveloading = false
          // 刷新
          this.setUrl(this.iframeUrl)
        }).catch(()=>{
          this.saveloading = false
        })
      }else{
        taskEdit(params).then(()=>{
          this.$message.success('保存成功')
          this.saveloading = false
          // 刷新
          this.setUrl(this.iframeUrl)
        }).catch(()=>{
          this.saveloading = false
        })
      }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.bg_f4f7fe {
  background-color: #f4f7fe;
  height: 100%;
  //   min-height: calc(100% - 68px);
}
.innerwrapper{
  background-color: #f4f7fe;
}
.leftbox {
  padding-top: 60px;
  width: 360px;
  position: relative;
}
.rightbox {
  padding-top: 20px;
  width: calc(100% - 360px);
  margin-left: 35px;
}
.rightpanel {
  border-radius: 4px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
  min-height: 60px;
  padding: 20px;
}
.mobox{
  width: 60px;
  height: 60px;
  padding: 15px;
  border-radius: 50%;
  background-color: #4A73FF;
}
.leftposition{
  position: absolute;
  left: -80px;
  top:300px
}
.rotate90{
  transform:rotate(90deg)
}
.rotatefu90{
  transform:rotate(-90deg)
}
.borderbtn{
  border: 1px solid #4A73FF;
  border-radius: 5px;
}
</style>

// <style lang="scss">
// .rightpanel {
//   .el-tabs__item {
//     height: 50px;
//     line-height: 50px;
//     font-size: 16px;
//     color: #000;
//     padding: 0;
//     &.is-active {
//       color: #4a73ff;
//       &::after {
//         content: "";
//         position: absolute;
//         left: calc(50% - 50px);
//         bottom: 0;
//         width: 100px;
//         height: 2px;
//         background-color: #4a73ff;
//         z-index: 1;
//       }
//     }
//   }
//   .el-tabs__active-bar {
//     display: none;
//   }
//   .el-tabs__nav-wrap::after {
//     height: 1px;
//   }
// }
// </style>